<template>
    <div class="bg-white rounded-lg overflow-hidden book-card-shadow transition-all duration-300 flex flex-col h-full">
      <!-- 图书封面 -->
      <div class="relative overflow-hidden aspect-[2/3]">
        <img
          :src="book.cover"
          :alt="book.title"
          class="w-full h-full object-cover transition-transform duration-500 hover:scale-105"
        />
        <!-- 分类标签 -->
        <div class="absolute top-2 left-2">
          <span class="bg-primary/90 text-white text-xs px-2 py-1 rounded">
            {{ book.category }}
          </span>
        </div>
        <!-- 评分 -->
        <div class="absolute bottom-2 right-2 bg-white/90 text-dark text-xs px-2 py-1 rounded flex items-center">
          <i class="fa fa-star text-accent mr-1"></i>
          {{ book.rating }}
        </div>
      </div>
      
      <!-- 图书信息 -->
      <div class="p-4 flex-1 flex flex-col">
        <h3 class="font-bold text-gray-800 mb-1 line-clamp-1">
          {{ book.title }}
        </h3>
        <p class="text-gray-500 text-sm mb-2 line-clamp-1">
          {{ book.author }}
        </p>
        <div class="flex items-center justify-between mt-auto">
          <span class="font-bold text-primary">¥{{ book.price.toFixed(2) }}</span>
          <button
            class="bg-primary hover:bg-primary/90 text-white px-3 py-1 rounded text-sm transition-colors"
            @click="addToCart(book)"
          >
            <i class="fa fa-shopping-cart mr-1"></i> 加入购物车
          </button>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { useCartStore } from '../stores/cartStore';
  
  // 接收props
  const props = defineProps({
    book: {
      type: Object,
      required: true,
    },
  });
  
  // 获取购物车状态
  const cart = useCartStore();
  
  // 添加到购物车
  const addToCart = (book) => {
    cart.addToCart(book);
    // 显示添加成功提示
    alert(`${book.title} 已添加到购物车！`);
  };
  </script>
  
  <style scoped>
  </style>